import { Image, StyleSheet, Text, View, ScrollView } from 'react-native';
import { Button, Layout, Avatar, ProgressBar, Input } from '@ui-kitten/components';
import { Link, useRouter } from 'expo-router';
import TopNavigation from '@/components/Navigation'
export default function TaskDetailScreen() {
  const router = useRouter()
  return <>
    <TopNavigation title='具体任务'></TopNavigation>
    <Layout style={{ backgroundColor: '#F4F4F4', flex: 1, padding: 15 }}>
      <Layout style={{ borderRadius: 5, overflow: 'hidden', padding: 10 }}>
        <Layout style={{ flexDirection: 'row' }}>
          <Avatar shape='round'
            style={{ marginLeft: 20, marginRight: 10 }}
            source={require('../assets/images/avatar.png')}></Avatar>
          <View>
            <Text style={{ fontSize: 16 }}>姓名： XXX</Text>
            <Text style={{ fontSize: 12 }}>任务截止时间:2025.01.09</Text>
          </View>
        </Layout>
        <View style={{ marginVertical: 10, backgroundColor: '#D8D8D8', height: 0.5 }}></View>
        <Layout style={{ marginBottom: 10, flexDirection: 'row', justifyContent: 'space-between' }}>
          <Text >任务完成情况</Text>
          <Text>20%</Text>
        </Layout>
        <ProgressBar progress={0.2}></ProgressBar>
        <View style={{ marginVertical: 15, backgroundColor: '#D8D8D8', height: 0.5 }}></View>
        <Layout style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <Text >优先级别</Text>
          <Text>优先</Text>
        </Layout>
        <View style={{ marginVertical: 15, backgroundColor: '#D8D8D8', height: 0.5 }}></View>
        <Layout style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <Text >花费时间</Text>
          <Text>2小时</Text>
        </Layout>
        <View style={{ marginVertical: 15, backgroundColor: '#D8D8D8', height: 0.5 }}></View>
      </Layout>
      <Text style={{ fontSize: 18, marginVertical: 10 }}>助力工具</Text>
      <Layout style={{ borderRadius: 5, overflow: 'hidden', padding: 10, flexDirection: 'row' }}>
        {[1, 2, 3, 4].map((el, index) => <Layout key={index} style={{ padding: 10, width: '25%' }}>
          <Avatar shape='square'
            style={{ marginLeft: 20, marginRight: 10 }}
            source={require('../assets/images/avatar.png')}></Avatar>
          <Text style={{ textAlign: 'center' }}>划分任务</Text>
        </Layout>)}
      </Layout>
      <Text style={{ fontSize: 18, marginVertical: 10 }}>助力工具</Text>
      <Layout style={{ borderRadius: 5, overflow: 'hidden', padding: 10 }}>
        <Text style={{ marginBottom: 10 }}>总结内容</Text>
        <ScrollView keyboardShouldPersistTaps='always'>
          <Input
            size='small'
            textAlignVertical="top"
            textStyle={{ paddingTop: 10, paddingBottom: 10, minHeight: 100 }}
            multiline={true}
            numberOfLines={4}
            placeholder=''
          />
        </ScrollView>
      </Layout>
    </Layout>
  </>
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  logo: {
    height: 138,
    width: 138,
    marginTop: 204,
    marginLeft: 'auto',
    marginRight: 'auto',
    backgroundColor: '#D8D8D8',
    borderRadius: 8
  },
});
